<template>
  <chart :options="options" @click="echartsC" />
</template>

<script>
export default {
  name: "ChartPie3",
  data() {
    return {
      center: ["50%", "30%"]
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isEntity: {
      type: Boolean,
      default: () => {
        return false;
      }
    },
    dimensions: {
      type: Array,
      default: () => {
        return null;
      }
    },
    max: {
      type: Number,
      default: 0
    }
  },
  computed: {
    options() {
      let option = {};
      if (this.isEntity) {
        option = {
          title: [
            {
              subtext: this.data.name,
              x: "center",
              bottom: "0%",
              textStyle: {
                color: "#fff",
                fontSize: 24,
                fontWeight: "normal"
              },
              subtextStyle: {
                color: "#fff",
                fontSize: 28,
                fontWeight: "normal"
              }
            },
          ],
          graphic: {
            elements: [
              {
                type: "image",
                style: {
                  image: this.data.icon,
                  width: 80,
                  height: 80
                },
                left: "center",
                top: "25%"
              }
            ]
          },
          series: [
            {
              name: this.data.name,
              type: "pie",
              radius: ["55%", "70%"],
              center: this.center,
              hoverAnimation: false,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              data: [
                {
                  value: this.data.value,
                  name: this.data.name,
                  itemStyle: {
                    color: this.data.color
                  }
                },
                {
                  value: this.max - this.data.value,
                  name: "rose2",
                  itemStyle: {
                    color: "transparent"
                  }
                }
              ]
            },
            {
              name: this.data.name,
              type: "pie",
              z: 0,
              radius: ["55%", "70%"],
              center: this.center,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              data: [
                {
                  value: 1,
                  itemStyle: {
                    color: "#434857"
                  }
                }
              ]
            }
          ]
        };
      }else{
        option = {
          title: [
            {
              subtext: this.data.name,
              x: "center",
              bottom: "58%",
              textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "normal"
              },
              subtextStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "normal"
              }
            },
            {
              text: ((this.data.value / this.max) * 100).toFixed(2) + "%",
              x: "center",
              bottom: "16%",
              textStyle: {
                color: this.data.color,
                fontSize: 40,
                fontFamily: "LESLIE",
                fontWeight: "normal"
              }
            },
            {
              text: this.data.value + "户",
              x: "center",
              bottom: "50%",
              textStyle: {
                color: "#fff",
                fontSize: 14,
                fontWeight: "normal"
              }
            }
          ],
          graphic: {
            elements: [
              {
                type: "image",
                style: {
                  image: this.data.icon,
                  width: 80,
                  height: 80
                },
                left: "center",
                top: "6%"
              }
            ]
          },
          series: [
            {
              name: this.data.name,
              type: "pie",
              radius: ["80%", "93%"],
              center: this.center,
              hoverAnimation: false,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              data: [
                {
                  value: this.data.value,
                  name: this.data.name,
                  itemStyle: {
                    color: this.data.color
                  }
                },
                {
                  value: this.max - this.data.value,
                  name: "rose2",
                  itemStyle: {
                    color: "transparent"
                  }
                }
              ]
            },
            {
              name: this.data.name,
              type: "pie",
              z: 0,
              radius: ["80%", "88%"],
              center: this.center,
              labelLine: {
                normal: {
                  show: false
                }
              },
              label: {
                normal: {
                  show: false,
                  position: "center"
                }
              },
              data: [
                {
                  value: 1,
                  itemStyle: {
                    color: "#434857"
                  }
                }
              ]
            }
          ]
        };
      }
      return option;
    }
  },
  methods: {
    echartsC(data) {
      this.$emit("click", data[0]);
    }
  }
};
</script>

<style scoped>
</style>
